<template>
  <div ref="mainCon" class="container">
    <topTitle v-if="!hiddleToolBar" :titleText="titleText"></topTitle>
    <div class="mainCon">
      <div class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item label="项目名称" class="row-padding-bottom">
              <el-input
                v-model="filterField.projectName"
                placeholder="请输入项目名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="区域" class="row-padding-bottom">
              <el-cascader
                ref="manageArea"
                v-model="filterField.areaId"
                :append-to-body="false"
                :options="areasOptions"
                @change="getAreaId"
                clearable
                filterable
                :props="{ checkStrictly: true, emitPath: false }"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="行业" class="row-padding-bottom">
                <el-select
                  v-model="filterField.industryId"
                  filterable
                  placeholder="请选择"
                  clearable
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="item in industryOptions"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="状态" class="row-padding-bottom">
                <el-select
                  v-model="filterField.status"
                  filterable
                  placeholder="请选择"
                  clearable
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="投资类型" class="row-padding-bottom">
                <el-select
                  v-model="filterField.investment"
                  filterable
                  placeholder="请选择"
                  clearable
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="item in investmentOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="操作用户名称" class="row-padding-bottom">
                <el-input
                  v-model="filterField.nickName"
                  placeholder="请输入操作用户名称"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="操作用户账号" class="row-padding-bottom">
                <el-input
                  v-model="filterField.userName"
                  placeholder="请输入操作用户账号"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="操作用户类型" class="row-padding-bottom">
                <el-select
                  v-model="filterField.userType"
                  filterable
                  placeholder="请选择"
                  clearable
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="item in userTypeList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :lg="8" :xl="6">
              <el-form-item label="操作时间" class="row-padding-bottom">
                <timeSelection
                  :startTime="filterField.operationStartTime"
                  :endTime="filterField.operationEndTime"
                  @getStartTimeValue="getStartTimeValue"
                  @getEndTimeValue="getEndTimeValue"
                ></timeSelection>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="标记" class="row-padding-bottom">
                <el-select
                  v-model="filterField.sourceType"
                  placeholder="请选择"
                  clearable
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="item in sourceTypeOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </template>
          <el-form-item label="">
            <a
              @click="toggleAdvanced"
              style="margin-left: 40px; color: #409eff; cursor: pointer"
              class="btnColor"
            >
              {{ advanced ? '收起' : '展开' }}
              <i
                :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
              ></i>
            </a>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
          </el-form-item>
          <el-form-item>
            <exportBtn
              responseType="get"
              :dataLen="tableList.length"
              :filterField="filterField"
              api="api-p/projectstats/expand/source/export"
            ></exportBtn>
          </el-form-item>
        </el-form>
      </div>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          border
          :max-height="tableHeight"
          @selection-change="handleSelectionChange"
          :data="tableList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column label="项目名称" width="230" fixed="left">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="areaDetailDesc"
            label="区域"
            :formatter="formatTd"
            width="230"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.areaDetailDesc"
                :columnName="'areaDetailDesc'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="industryName"
            label="行业"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="nickName"
            label="操作用户名称"
            :formatter="formatTd"
            width="170"
          >
          </el-table-column>
          <el-table-column
            prop="userName"
            label="操作用户账号"
            :formatter="formatTd"
            width="170"
          >
          </el-table-column>
          <el-table-column
            prop="userTypeName"
            label="操作用户类型"
            :formatter="formatTd"
            width="170"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="操作时间"
            :formatter="formatTd"
            width="170"
          >
          </el-table-column>
          <el-table-column
            prop="sourceTypeText"
            label="标记"
            align="center"
            min-width="110"
          ></el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <Pagination
          ref="pagination"
          @getpageNo="getpageNo"
          @getpageSize="getpageSize"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import scrollTable from '@/mixin/scrollTable.js'
export default {
  name: 'projectSource',
  mixins: [scrollTable],
  data() {
    return {
      titleText: '项目来源记录',
      advanced: false,
      //表格数据
      tableList: [],
      requestUrl: 'api-p/projectstats/expand/source/list',
      //搜索条件
      filterField: {
        projectName: '', //项目名称
        areaId: '', //区域
        status: '', //开工状态  ；默认只显示已开工状态的项目2020/10/19 恩施
        industryId: '', //行业
        investment: '', //投资类型
        nickName: '', //用户名称
        userName: '', //用户账号
        userType: '', //用户类型
        operationStartTime: '', //开始日期
        operationEndTime: '', //结束日期
        sourceType: '', //标记
        serverArea: '', //登录用户区域
      },
      pageSize: 20,
      pageNo: 1,
      isShow: false, //列表加载
      loading: true,
      sourceTypeOptions: [],
      userTypeList: [],
    }
  },
  computed: {
    ...mapState([
      'investmentOptions',
      'statusOptions',
      'areasOptions',
      'industryOptions',
    ]),
  },
  created() {
    this.filterField.serverArea = this.$store.state.areaInfoArr.areaId
    this.getSourceType()
    this.getUserType()
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  mounted() {},
  activated() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
  },
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    ...mapActions([
      'getInvestmenttype',
      'getStatus',
      'getAreas',
      'getIndustry',
    ]),
    //获取用户类型集合
    getUserType() {
      this.axios.get('api-m/users/type').then((res) => {
        if (!res.data.hasError) {
          this.userTypeList = res.data.result
        }
      })
    },
    getProject() {
      if (this.$route.params && this.$route.params.projectName) {
        this.filterField.projectName = this.$route.params.projectName
        this.$nextTick(function () {
          this.$refs.pagination.getTableListData()
        })
      } else {
        this.$nextTick(function () {
          this.$refs.pagination.getTableListData()
        })
      }
    },
    /**
     * @description: 获取开始日期
     * @param {*} urls
     * @param {*} datas
     */
    getStartTimeValue(val) {
      if (val) {
        this.filterField.operationStartTime = val
      } else {
        this.filterField.operationStartTime = ''
      }
    },
    /**
     * @description: 获取结束日期
     * @param {*} urls
     * @param {*} datas
     */
    getEndTimeValue(val) {
      if (val) {
        this.filterField.operationEndTime = val
      } else {
        this.filterField.operationEndTime = ''
      }
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    // 搜索
    searchList() {
      this.pageSize = 20
      this.pageNo = 1
      this.$refs.pagination.getTableListData()
    },

    getSourceType() {
      this.axios({
        method: 'post',
        url: 'api-p/project/expand/source/mark',
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.sourceTypeOptions = response.data.result
          }
        })
        .catch({})
    },
  },
}
</script>

<style scoped lang="less"></style>
